<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lb
  Date: 15-12-22
  Time: 上午11:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>批量修改</title>
</head>
<body>
<div id="weeks">
    <table class="table">
        <tr>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                            data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="true">
                        ${area}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li id="XISHUANGBANNA"><a
                                href="/house_week/beforebatchupdatehouseweektime/XISHUANGBANNA">西双版纳</a></li>
                        <li id="SANYA"><a href="/house_week/beforebatchupdatehouseweektime/SANYA">三亚</a></li>
                        <li id="SUZHOU"><a href="/house_week/beforebatchupdatehouseweektime/SUZHOU">苏州</a></li>
                        <li id="LIJIANG"><a href="/house_week/beforebatchupdatehouseweektime/LIJIANG">丽江</a></li>
                        <li id="SHENZHEN"><a href="/house_week/beforebatchupdatehouseweektime/SHENZHEN">深圳</a></li>
                        <li id="GUANGZHOU"><a href="/house_week/beforebatchupdatehouseweektime/GUANGZHOU">广州</a></li>
                        <li id="CHENGDU"><a href="/house_week/beforebatchupdatehouseweektime/CHENGDU">成都</a></li>
                        <li id="KUNMING"><a href="/house_week/beforebatchupdatehouseweektime/KUNMING">昆明</a></li>
                    </ul>
                </div>
            </td>
            <td>
                <c:forEach items="${houseInfoDTOs}" var="houseInfoDTO">
                    &nbsp;&nbsp;${houseInfoDTO.name}<input type="checkbox" value="${houseInfoDTO.guid}" v-model="guids" class="houseinfocheckbox"/>&nbsp;&nbsp;
                </c:forEach>
            </td>
        </tr>
        <tr>
            <td>周次选择</td>
            <td>
                <a v-on:click="change('HUANGJINZHOU')">黄金周</a>
                <a v-on:click="change('WANGJIZHOU')">旺季周</a>
                <a v-on:click="change('PINGJIZHOU')">平季周</a>
                <a v-on:click="change('DANJIZHOU')">淡季周</a>
            </td>
        </tr>
    </table>
    <div>
        <table>
            <tr>
                <td><input type="text" placeholder="开始时间" class="times" id="addStart" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'addEnd\');}'})" value="" v-model="week.start"></td>
                <td><input type="text" placeholder="结束时间" class="times" id="addEnd" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'addStart\');}'})" value="" v-model="week.end"></td>
                <td colspan="2"><button v-on:click="addWeek(item)" class="btn btn-default">添加</button></td>
            </tr>
        </table>
    </div>
    <table class="table" v-if="item.length>0">
        <thead>
            <tr>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>管理</th>
            </tr>
        </thead>
        <tr v-for="item in item">
            <td><input type="text" class="times" id="addStart{{$index}}" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\\'addEnd{{$index}}\\');}'})" value="{{item.start}}"></td>
            <td><input type="text" class="times" id="addEnd{{$index}}" onFocus="WdatePicker({minDate:'#F{$dp.$D(\\'addStart{{$index}}\\');}'})" value="{{item.end}}"></td>
            <td><a class="btn btn-danger" v-on:click="delWeek(item)">删除</a></td>
        </tr>
    </table>
</div>
<script>
    var example1 = new Vue({
        el: '#weeks',
        data: {
            item: {},
            guids:[]
        },
        methods: {
            change: function (value) {
                this.weekname = value;
                var guidsArray = [];
                $("input[type=checkbox]:checked").each(function () {
                    guidsArray.push($(this).val())
                })
                var houseInfoGuid = guidsArray[0];
                var $this = this;
                $.ajax({
                    url: '/house_week/findweektime/' + houseInfoGuid + '/' + value,
                    success: function (data) {
                        $this.item=data.houseWeekTimeDTOs;
                    }
                })
            },
            delWeek: function (index) {
                this.item.$remove(index);
            },
            addWeek: function () {
                var guid = this.guids.join(",");
                var times = this.week.start+","+this.week.end;
                var weekname = this.weekname;
                var $this = this;
                $.ajax({
                    url:"/house_week/batchupdatehouseweektime/"+guid+"/"+weekname+"/"+times,
                    success: function (data) {
                        if(data.success){
                            $this.item.push($this.week)
                            $this.week="";
                        }
                    }
                })
            }
        }
    })
    })

</script>

</body>
</html>